<template>
  <el-dialog
    :title="disabled ? '增加订场' : '选择场地'"
    :visible.sync="showList"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="1100px"
    :append-to-body="true"
    class="dialog-list"
    @close="replacementBtn(1)"
  >
    <el-form @submit.native.prevent>
      <el-form-item
        v-if="details"
        :label="disabled ? '已预定场次：' : '替换预定场次：'"
        :label-width="disabled ? '7em' : '8em'"
        style="margin-bottom: 10px;"
      >
        <div class="primaryColor">{{ details }}</div>
      </el-form-item>
      <el-form-item label="选择日期：" label-width="6em">
        <el-date-picker
          v-model="activeDate"
          :picker-options="pickerOptions"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :clearable="false"
          :disabled="disabled"
          @change="getSiteList"
        />
      </el-form-item></el-form>
    <div class="ydCnt">
      <div v-if="siteListData && siteListData.length > 0" class="site-list-box">
        <div class="time-list">
          <div class="list-item close-all">
            场区
          </div>
          <div v-for="time in siteListData[0].sites" :key="time.id" class="list-item time">
            {{ time.beginTime + " - " + time.endTime }}
          </div>
        </div>
        <div
          v-if="siteListData &&
            siteListData.length > 0 &&
            siteListData[0].sites &&
            siteListData[0].sites.length > 0
          "
          class="site-list"
        >
          <div v-for="site in siteListData" :key="site.id" class="site-item">
            <div class="list-item site-name">
              <el-popover
                placement="top-start"
                transition="none"
                popper-class="popClass"
                :content="site.siteModelName"
                trigger="hover"
              >
                <span slot="reference">{{ site.siteModelName }}
                <!-- {{ site.statusList ?
                  site.statusList.indexOf('0') + site.statusList.indexOf('3') : '999' }} -->
                </span>
              </el-popover>
            </div>
            <el-popover
              v-for="price in site.sites"
              :key="price.id"
              transition="none"
              placement="top"
              popper-class="popClass"
              :close-delay="closeDelay"
              trigger="hover"
              :content="site.siteModelName +
                ':' +
                price.beginTime +
                ' - ' +
                price.endTime
              "
            >
              <div
                slot="reference"
                class="list-item site-price"
                :class="price.status === '6'
                  ? 'mian' : price.overdue == true
                    ? price.status === '1'
                      ? 'red'
                      : price.status === '2'
                        ? 'green'
                        : 'hui'
                    : price.status === '1' || price.status === '4'
                      ? 'red'
                      : price.status === '2' || price.status === '5'
                        ? 'green'
                        : price.status === '3'
                          ? 'yellow'
                          : price.status === '7' ||
                            price.status === '8' ||
                            price.status === '9' ||
                            price.status === '10'
                            ? 'hui'
                            : ''
                "
                :style="{
                  backgroundColor:
                    siteIds && siteIds.indexOf(price.id) != -1 && price.status === '0'
                      ? 'rgba(67, 94, 190, 1)'
                      : '',
                  color:
                    siteIds && siteIds.indexOf(price.id) != -1 && price.status === '0'
                      ? '#fff'
                      : '',
                }"
                @click="ccClick(
                  price,
                  site.siteModelName,
                  site.siteModelId,
                  site,
                  price
                )
                "
              >
                <div slot="reference">
                  <div v-if="price.status !== '3'" style="text-align: center;">{{ price.fromFlag === '0' ? '(散)' : price.fromFlag === '1' ? '(会)': price.fromFlag === '2' ? '(固)': '' }}{{ price.status === '6' ? '免费' : price.nickName ? price.nickName :
                    price.price }}</div>
                  <div v-if="price.status !== '3' && price.userPhone" style="text-align: center;">{{ price.userPhone }}</div>
                  <img v-if="price.status == '3'" src="@/icons/png/ic_lock_white.png" style="width: 20px">
                  <img
                    v-if="siteIds && siteIds.indexOf(price.id) != -1"
                    src="@/icons/png/yuding_ic_select.png"
                    class="xzXb"
                  >
                </div>
              </div>
            </el-popover>
          </div>
        </div>
        <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
          <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
        </div>
      </div>
      <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
        <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="color-list">
        <div v-for="color in colorList" :key="color.id" class="color-item">
          <div class="number" :style="'background-color: ' + color.number" />
          <div class="name">{{ color.name }}</div>
        </div>
      </div>
      <el-button @click="replacementBtn(0)">取消</el-button>
      <el-button type="primary" @click="replacementBtn(1)">确 认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { parseTime } from '@/utils/index'
import {
  siteList
} from '@/api'
import store from '@/store'

export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      showList: false,
      activeDate: '',
      colorList: [
        { id: 1, name: '可用场地', number: 'rgba(244, 247, 252, 1)' },
        { id: 2, name: '场地锁场', number: 'rgba(251, 188, 38, 1)' },
        { id: 3, name: '预定未付', number: 'rgba(237, 77, 0, 1)' },
        { id: 4, name: '预定已付', number: 'rgba(34, 179, 107, 1)' },
        { id: 5, name: '过期场地', number: 'rgba(204, 204, 204, 1)' },
        { id: 6, name: '免费场地', number: 'rgb(61,206,209)' }
      ],
      closeDelay: 0,
      projectId: '',
      reserveForm: [],
      siteIds: [],
      siteListData: [],
      details: '',
      disabled: false
    }
  },
  methods: {
    showBtn(activeDate, projectId, arr, pd) {
      this.showList = true
      this.activeDate = activeDate
      this.projectId = projectId
      let details = ''
      arr.forEach((item, index) => {
        if (index === arr.length - 1) {
          details = details + item.siteModelName + ' ' + item.day + ' ' + item.beginTime + ' - ' + item.endTime
        } else {
          details = details + item.siteModelName + ' ' + item.day + ' ' + item.beginTime + ' - ' + item.endTime + ' ' + '|' + ' '
        }
      })
      if (pd && pd === 1) {
        this.disabled = true
      } else {
        this.disabled = false
      }
      this.details = details
      this.getSiteList()
    },
    replacementBtn(e) {
      if (e === 0) {
        this.siteIds = []
        this.reserveForm = []
      }
      this.showList = false
      const obj = {
        siteIds: this.siteIds,
        reserveForm: this.reserveForm
      }
      this.$emit('replacementList', obj)
    },
    // 获取场次列表
    getSiteList() {
      this.siteIds = []
      this.reserveForm = []
      const {
        projectId,
        activeDate
      } = this
      const day = parseTime(activeDate).slice(0, 10)
      siteList({ param: { projectId, day, flag: '1' }}).then((res) => {
        if (res.errorCode === '000000') {
          this.siteListData = res.recordList
        }
      })
    },
    ccClick(e, name, id) {
      this.statusb = e.status
      if (e.status === '0') {
        if (this.siteIds.length === 0) {
          this.siteIds = [e.id]
          this.reserveForm = [{ ...e, name: name, siteModelId: id }]
        } else {
          let pd = true
          for (let num = 0; num < this.reserveForm.length; num++) {
            if (this.reserveForm[num].id === e.id) {
              this.reserveForm.splice(num, 1)
              this.siteIds.splice(num, 1)
              pd = false
            }
          }
          if (pd) {
            this.siteIds.push(e.id)
            this.reserveForm.push({ ...e, name: name, siteModelId: id })
          }
        }
      } else {
        this.siteIds = []
        this.reserveForm = []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.ydCnt {
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
  height: calc(50vh);
}

.site-list-box {
  display: flex;
  position: relative;
  padding-left: 120px;

  .time-list {
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .list-item {
    border: 1px solid transparent;
    width: 120px;
    height: 40px;
    background-position: right bottom;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    cursor: pointer;
    background-color: rgba(244, 247, 252, 1);
    font-size: 14px;

    &.close-all,
    &.time {
      background-color: #f5f5f5;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      line-height: 40px;
      text-align: center;
    }

    &.time {
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    &.site-name {
      background-color: #f5f5f5;
      display: block;
      line-height: 40px;
      text-align: center;
      display: flex;
      justify-content: center;

      span {
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
      }

      img {
        width: 20px;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -2px;
        flex: none;
      }
    }
  }

  .wzred {
    color: rgba(237, 77, 0, 1);
  }

  .site-price {
    color: #333333;
    position: relative;
  }

  .yellow {
    color: #fff;
    background-color: rgba(251, 188, 38, 1);
  }

  .blue {
    color: #fff;
    background-color: rgb(61, 206, 209);
  }

  .red {
    color: #fff !important;
    background-color: rgba(237, 77, 0, 1);
  }

  .green {
    color: #fff;
    background-color: rgba(34, 179, 107, 1);
  }

  .hui {
    color: #fff;
    background-color: rgba(204, 204, 204, 1);
  }

  .mian {
    color: $primaryColor;
  }

  .site-list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;

    .site-item {
      width: 120px;
      margin-left: 5px;
    }
  }
}

.color-list {
  display: flex;
  align-items: center;
  float: left;

  .color-item {
    margin-right: 20px;
    display: flex;
    align-items: center;
    padding: 10px 0;

    .number {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      margin-right: 10px;
    }

    .name {
      height: 20px;
      font-size: 13px;
      line-height: 20px;
    }
  }
}

.xzXb {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
}
</style>

